<template>
  <div class="items_body">
    <top/>
    <div class="items_page_bottom_left">
      <div class="items_page_bottom_left_title">
        {{ title }}
      </div>
      <span class="items_page_bottom_left_time">
        {{ time }}
      </span>
      <div class="items_page_bottom_left_dscribe-contanier">
        <span class="items_page_bottom_left_dscribe-contanier_propose">项目目标</span>
        <div class="items_page_bottom_left_dscribe-contanier_propose_line" style="top: 44px ; left: 23px"></div>
        <div class="items_page_bottom_left_dscribe-contanier_propose_text">
          <div class="items_page_bottom_left_dscribe-contanier_propose_text_text">
            {{ propose }}
          </div>
        </div>
        <div class="items_page_bottom_left_dscribe-contanier_propose_line" style="top: 145px ; left: 23px"></div>
        <span class="items_page_bottom_left_dscribe-contanier_applyarea_title">
          应用领域
        </span>
        <div class="items_page_bottom_left_dscribe-contanier_applyarea_container1">
          <span v-for="(aaTag,index) in aaTagsInner" :key="index" v-show="aaTag.logoUUID !==undefind">
            <img v-if="aaTag.logoUUID !==null" :src="'http://localhost:8888/image/'+aaTag.logoUUID+'.png'">
            {{ aaTag.applicationAreaName }}
          </span>
        </div>
        <div class="items_page_bottom_left_dscribe-contanier_applyarea_container2">
          <img src="../assets/project/操作系统/Android.png"/>
          <img src="../assets/project/操作系统/windows.png"/>
        </div>
        <span class="items_page_bottom_left_dscribe-contanier_langruge">
          语言/框架
        </span>
        <div class="items_page_bottom_left_dscribe-contanier_langruge-container" style="  top: 385px;
  left: 12px;padding-top: 6px">
          <img src="../assets/cH.png" class="img1"/>
          <span>
            STL  Boost  Qt
          </span>
        </div>
        <div class="items_page_bottom_left_dscribe-contanier_langruge-container" style="  top: 432px;
  left: 12px;padding-top: 10px">
          <img src="../assets/logo_python.png" class="img2"/>
          <span>
            Django     Diesel
          </span>
        </div>
        <div class="bingzhuangtu">
          <span style="position: absolute; top: 30px;left: 15px">饼状图</span>
        </div>
        <div class="items_page_bottom_left_dscribe-contanier_button-box">
          <button class="items_page_bottom_left_dscribe-contanier_button1">
            <img src="../assets/pull.png" class="items_page_bottom_left_dscribe-contanier_button-img"/>
            <span class="items_page_bottom_left_dscribe-contanier_button-text">拉取</span>
          </button>
          <button class="items_page_bottom_left_dscribe-contanier_button2">
            <img src="../assets/push.png" class="items_page_bottom_left_dscribe-contanier_button-img"/>
            <span class="items_page_bottom_left_dscribe-contanier_button-text">推送</span>
          </button>
        </div>
        <div class="items_page_bottom_left_dscribe-auther-box">
          <div style="overflow: hidden; width: 50px;height: 50px;background-color: white;border-radius: 50px;position: absolute;
top: 28px;left: 27px ;cursor:pointer">
            <img v-if="avataruuid !==null" :src="'http://localhost:8888/image/'+ avataruuid +'.png'"
                 style="height: 50px;width: auto" @click="itemspageChangeUsers">
            <img v-else src="../assets/nullProfile.png" style="height: 48px;width: 50px" @click="itemspageChangeUsers">
          </div>
          <span class="athname">{{ username }}</span>
          <div class="items_page_bottom_left_dscribe-auther-box-levelbox">
            LV{{ level }}
          </div>
          <div class="items_page_bottom_left_dscribe-auther-box-messagebox">
            <button class="items_page_bottom_left_dscribe-auther-box-button1">
              <span style="display: flex; align-items: center ;justify-content: center">
                <img src="../assets/follow.png" style="width: 19px;height: 17px; margin-right: 5px"/>
                <span style="cursor: default">关注</span>
              </span>
            </button>
            <button class="items_page_bottom_left_dscribe-auther-box-button2">
              <span style="display: flex; align-items: center ;justify-content: center">
                <img src="../assets/zanzhu.png" style="width: 32px;height: 22px;margin-right: 5px"/>
                <span style="cursor: default">赞助</span>
              </span>
            </button>
          </div>
          <div class="items_page_bottom_left_dscribe-auther-box-sign">
            <span v-if="statemessage !==null" class="items_page_bottom_left_dscribe-auther-box-sign-text">
              {{ statemessage }}
            </span>
            <span v-else>
              博主很赖，什么都没有留下
            </span>
          </div>
        </div>
        <div class="otherFunction">
          <div>
            <img @click="() =>{this.chuNum++}" src="../assets/project/chu.png" alt="">
            <p>{{ chuNum }}</p>
          </div>
          <div>
            <img @click="doCollection" src="../assets/project/star.png" alt="">
            <p>{{ clickNum }}</p>
          </div>
          <div>
            <img src="../assets/project/share.png" alt="">
            <p>{{ shareNum }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="items_page_bottom_right">
      <Items_bottom_right_video/>
      <div class="items_page_bottom_right-describe">
        <div class="items_page_bottom_right-describe-title">
          <span class="items_page_bottom_right-describe-title-text">项目描述</span>
        </div>
        <div v-for="(items,index) in description" :key="description[index].descriptionUnitID"
             class="items_page_bottom_right-describe-content">
          <span>
              {{ items.content }}
          </span>
          <div>

          </div>
        </div>
      </div>
      <Items_bottom_right_program/>
    </div>
  </div>
</template>

<script>
import Items_bottom_right_video from "../components/Items_bottom_right_video";
import Items_bottom_right_program from "../components/Items_bottom_right_program";
import {GetProjectDescription, GetProjectInfo, GetTags, GetUserInfo} from "@/api/ProjectApi";
import Top from "@/components/Top";
import {getAATags, getPlTagsInfo} from "@/api/HomeApi";
export default {
  data() {
    return {
      chuNum:'',
      clickNum:'',
      shareNum:'',
      input: '',
      title: '',
      time: '',
      propose: '',
      description: [],
      projectID: '',
      username: '',
      level: '',
      statemessage: '',
      avataruuid: '',
      aaTagsInner:[4],
    }
  },
  components: {
    Items_bottom_right_video,
    Items_bottom_right_program,
    Top
  },
  created() {
    let pid1 = this.$store.state.projectID
    let vid = this.$store.state.versionID
    let uid = this.$store.state.userID
    GetProjectInfo(pid1).then(res => {
      this.chuNum =res.data.chuNum
      this.clickNum =res.data.clickNum
      this.shareNum =res.data.shareNum
      this.title = res.data.projectName;
      this.time = res.data.creationDate;
      this.propose = res.data.idea;
    })
    GetProjectDescription(vid).then(res => {
      this.description = res.data
    })
   getAATags().then(res =>{
     for (let i=0;i<4;i++){
       this.aaTagsInner.push(res.data[i])
     }
   })
    GetUserInfo(uid).then(res => {
      this.username = res.data.userName
      this.level = res.data.level.levelNum
      this.statemessage = res.data.stateMassage
      this.avataruuid = res.data.avatarUUID
    })
  },
  methods: {
    itemspageChangeHome() {
      this.$router.push('/home/java')
    },
    itemspageChangeUsers() {
      this.$router.push('/space/main')
    },
    doCollection(){
      this.showCollection =true
    }
  }
}
</script>

<style>
.items_body {
  width: 100%;
  height: 3000px;
}


.items_page_bottom_left {
  height: 861px;
  width: 574px;
  border-style: 2px solid;
  border-left:  #52ACA8;
}

.items_page_bottom_left_title {
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  text-align: left;
  cursor: default;
  margin-top: 70px;
  margin-left: 60px;
  display: inline-block;
}

.items_page_bottom_left_time {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  text-align: center;
  line-height: normal;
  cursor: default;
  display: inline-block;
  margin-left: 5px;
}

.items_page_bottom_left_dscribe-contanier {
  width: 500px;
  height: 861px;
  position: absolute;
  top: 120px;
  left: 58px;
  background: inherit;
  background-color: rgba(249, 248, 248, 1);
  border: none;
  border-radius: 3px;
  box-shadow: -10px -10px 20px rgb(0 0 0 / 6%);
}

.items_page_bottom_left_dscribe-contanier_propose {
  position: absolute;
  left: 25px;
  top: 8px;
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: rgb(21, 21, 21);
  text-align: left;
  cursor: default;
}

.items_page_bottom_left_dscribe-contanier_propose_text {
  height: 101px;
  width: 90%;
  color: rgb(70, 70, 70);
  position: absolute;
  top: 45px;
  left: 13px;
  background-color: rgb(223 223 223);
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  text-align: left;
}

.items_page_bottom_left_dscribe-contanier_propose_line {
  height: 2px;
  width:420px;
  background-color: #90C5BC;
  position: absolute;
}

.items_page_bottom_left_dscribe-contanier_propose_text_text {
  margin-top: 8px;
  margin-left: 6px;
}

.items_page_bottom_left_dscribe-contanier_applyarea_title {
  position: absolute;
  top: 157px;
  left: 25px;
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: left;
  cursor: default;
}

.items_page_bottom_left_dscribe-contanier_applyarea_container1 {
  width:450px;
  height: 78px;
  background-color: #FFFF;
  border-style: solid;
  border-color: #90C5BC;
  border-width: 1px;
  position: absolute;
  top: 192px;
  left: 12.5px;
  border-radius: 5px;
}

.items_page_bottom_left_dscribe-contanier_applyarea_container2 {
  width: 450px;
  height: 52px;
  background-color: #FFFF;
  border-style: solid;
  border-color: #90C5BC;
  border-width: 1px;
  position: absolute;
  top: 282px;
  left: 12.5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items_page_bottom_left_dscribe-contanier_langruge {
  height: 26px;
  width: 88.55px;
  position: absolute;
  top: 352px;
  left: 21px;
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: left;
  cursor: default;
}

.items_page_bottom_left_dscribe-contanier_langruge-container {
  height: 48px;
  width: 400px;
  background-color: #FFFF;
  border-style: solid;
  border-color: #90C5BC;
  border-width: 1px;
  position: absolute;
  border-radius: 5px;
  box-sizing: border-box;
}

.items_page_bottom_left_dscribe-contanier_button-box {
  height: 60px;
  width: 100%;
  position: absolute;
  top: 495px;
}

.items_page_bottom_left_dscribe-contanier_button1 {
  height: 52px;
  width: 210px;
  margin-left: 12px;
  margin-right: 7px;
  border-width: 1px;
  background: #B3D2D2;
  border-style: solid;
  border-color: rgb(205, 223, 223);
  border-radius: 5px;
}

.items_page_bottom_left_dscribe-contanier_button1:hover {
  background: #7B989F;
}

.items_page_bottom_left_dscribe-contanier_button2 {
  height: 52px;
  width: 210px;
  margin-left: 12px;
  margin-right: 7px;
  border-width: 1px;
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 223, 223);
  border-radius: 5px;
}

.items_page_bottom_left_dscribe-contanier_button2:hover {
  background-color: #CDF7EA;
}

.items_page_bottom_left_dscribe-contanier_button-img {
  height: 24px;
  width: 31px;
}

.items_page_bottom_left_dscribe-contanier_button-text {
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  margin-left: 8px;
  position: relative;
  top: -5px;
}

.bingzhuangtu {
  border-radius: 50px;
  height: 79px;
  width: 79px;
  border-style: solid;
  border-color: #999999;
  border-width: 1px;
  position: absolute;
  top: 393px;
  left: 420px;
}

.items_page_bottom_left_dscribe-auther-box {
  height: 250px;
  width: 480px;
  background-color: #D0CCCA;
  position: absolute;
  top: 559px;
  left: 2px;
  border-bottom-style: solid;
  border-bottom-color: #90C5BC;
  border-bottom-width: 3px;
}

.athname {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  letter-spacing: normal;
  color: #333333;
  text-align: center;
  line-height: normal;
  position: absolute;
  top: 40px;
  left: 80px;
}

.items_page_bottom_left_dscribe-auther-box-levelbox {
  display: flex;
  height: 20px;
  width: 35px;
  background-color: #D0CCCA;
  border-style: solid;
  border-width: 3.5px;
  border-color: #D2BFC8;
  position: absolute;
  top: 40px;
  left: 195px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  color: rgb(149, 116, 108);
  align-items: center;
  justify-content: center;
}

.items_page_bottom_left_dscribe-auther-box-messagebox-text {
  font-family: "新細明體-ExtB Bold", "新細明體-ExtB Regular", 新細明體-ExtB, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  width: 36px;
  height: 12px;
  color: #495B57;
  position: absolute;
  top: 55px;
  right: 247px;
}

.items_page_bottom_left_dscribe-auther-box-button1 {
  top: 29px;
  right: 144px;
  background: #B0E3DA;
  border-width: 1px;
  width: 86px;
  height: 42px;
  position: absolute;
  border-style: solid;
  border-color: rgb(65, 129, 138);
  border-radius: 4px;
  display: block;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.items_page_bottom_left_dscribe-auther-box-button2 {
  top: 29px;
  right: 34px;
  background: #D0CCCA;
  border-width: 2px;
  color: #468A8A;
  width: 86px;
  height: 42px;
  position: absolute;
  border-style: solid;
  border-color: rgb(65, 129, 138);
  border-radius: 4px;
  display: block;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.items_page_bottom_left_dscribe-auther-box-button1:hover {
  background: #52ACA8;
}

.items_page_bottom_left_dscribe-auther-box-button2:hover {
  background: #E3BBB0;
}

.items_page_bottom_left_dscribe-auther-box-sign {
  width: 450px;
  height: 150px;
  position: absolute;
  background-color: white;
  left: 12px;
  bottom: 11px;
  border-radius: 4px;
}

.items_page_bottom_left_dscribe-auther-box-sign-text {
  margin-left: 10px;
  font-family: 新細明體-ExtB, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: rgb(73, 91, 87);
  text-align: left;
}

.items_page_bottom_right {
  width: 61.3%;
  height: 300%;
  position: absolute;
  left:580px;
  top: 102px;
  background-color: white;
}

.items_page_bottom_right-describe {
  width: 891px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(223, 231, 232);
  border-radius: 3px 3px 0px 0px;
}

.items_page_bottom_right-describe-title {
  padding-top: 20px;
  width: 100%;
  height: 47px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(223, 231, 232);
}

.items_page_bottom_right-describe-title-text {
  margin-left: 20px;
  top: 10px;
  left: 20px;
  width: 80px;
  height: 26px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items_page_bottom_right-describe-content {
  width: 100%;
  font-family: 微软雅黑, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  margin-bottom: 15px;
}

.items_page_bottom_left_dscribe-contanier_applyarea_container1 ol {
  height: 50px;
  width: 100%;
}

.project-search input {
  display: inline-block;
  position: absolute;
  width: 610px;
  height: 36px;
  border-radius: 5px;
  top: 15px;
  left: 688px;
  padding-right: 10px;
}

.project-search img {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 5px;
  width: 20px;
  height: 20px;
}

.project-search input {
  outline: transparent;
  padding-left: 10px;
  top: 0;
  left: 0;
  border: #52ACA8 1px solid;
}

.items_page_bottom_right-describe-content div {
  height: 1px;
  width: 90%;
  background-color: #CDD5D7;
  margin-left: 50px;
  margin-top: 15px;
}
.img1{
  width: 32px;
  height: 36px;
  margin-left: 40px;
}
.img2{
  width: 71px;
  height: 25px;
  margin-left: 20px;
}
.items_page_bottom_left_dscribe-contanier_langruge-container span{
  display: inline-block;
  vertical-align: top;
  margin-top: 5px;
  margin-left: 40px;
}
.items_page_bottom_left_dscribe-contanier_applyarea_container2 img{
  width: 38px;
  height: 42px;
  margin-left: 20px;
  margin-right: 20px;
}
.items_page_bottom_left_dscribe-contanier_applyarea_container1 img{
  width: 15px;
  height: 13px;
}
.items_page_bottom_left_dscribe-contanier_applyarea_container1 span ,.items_page_bottom_left_dscribe-contanier_applyarea_container1 ul li{
  display: inline-block;
  width: 85px;
  height: 22px;
  background: #F4F4F4;
  border-radius: 5px;
  border: #E1E1E1 1px solid;
  margin: 5px 10px;
  padding-left: 5px;
  padding-top: 4px;
  font-size: 13px;
  cursor: pointer;
}

.items_page_bottom_left_dscribe-contanier_applyarea_container1 span img ,.items_page_bottom_left_dscribe-contanier_applyarea_container1 ul li img{
  width: 15px;
  height: 13px;
}
.items_page_bottom_left_dscribe-contanier_applyarea_container1 span:hover,.items_page_bottom_left_dscribe-contanier_applyarea_container1ul li:hover{
  border: #C1CAC9 1px solid;
  background: #D5E1DF;
}
.otherFunction{
  position: absolute;
  bottom: 0;
  width: 500px;
  height: 45px;
}
.otherFunction div{
  width: 140px;
  height: 45px;
  margin-top: 5px;
  margin-left: 26px;
  display: inline-block;
}

.otherFunction img{
  margin-top: 6px;
  width: 47px;
  height: 24px;
  display: inline-block;
}
.otherFunction p{
  display: inline-block;
  height: 24px;
  width: 40px;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: normal;
  text-align: center;
  line-height: normal;
  color: #666262;
  margin-top: 10px;
  box-sizing: border-box;
  vertical-align:top;
}
#showCollectionBox{
  position: absolute;
  background:#FFFF;
  top: 600px;
  left: 460px;
  width: 420px;
  height: 426.8px;
  z-index: 10;
  border-radius: 5px;
}
#showCollectionBox span{
  display: block;
  text-align: center;
  font-size: 16px;
}
</style>
